<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="10" style="padding-left: 100px">
        <div class="work" id="work1">
            <div class="row">
                <div class="img">
                    <a><img src="../../public/static/images/one.jpg"/></a>	
                </div>
                <div class="num"><h5>今日门诊人数:&nbsp;<span class="currentNum"></span></h5></div>
                <div class="desc"><h5>就诊概况</h5></div>
                <div class="total"><h3>门诊总人数:&nbsp;<span class="Total"></span></h3></div>
            </div>
        </div>
      </el-col>
      <el-col :sm="24" :lg="10" style="padding-left: 50px">
        <div class="work" id="work2">
          <div class="row">
              <div class="img">
                  <a><img src="../../public/static/images/two.jpg"/></a>
              </div>
              <div class="num"><h5>今日住院人数:&nbsp;<span class="currentZhuYuan"></span></h5></div>
              <div class="desc"><h5>住院概况</h5></div>
              <div class="total"><h3>住院总人数:&nbsp;<span class="zhuyuan"></span></h3></div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <div id="big">
    <label>排班信息</label>
    <el-table v-loading="loading" :data="paibanList" @selection-change="handleSelectionChange">
      <el-table type="selection" width="55" align="center" />
      <el-table-column label="姓名" align="center" prop="doctorname" />
      <el-table-column label="星期一" align="center" prop="one" />
      <el-table-column label="星期二" align="center" prop="two" />
      <el-table-column label="星期三" align="center" prop="three" />
      <el-table-column label="星期四" align="center" prop="four" />
      <el-table-column label="星期五" align="center" prop="five" />
      <el-table-column label="星期六" align="center" prop="six" />
      <el-table-column label="星期天" align="center" prop="seven" />
    </el-table>
  </div>
  </el-row>
  </div>
</template>

<script>
import { listPaiban} from "@/api/system/paiban";

export default {
  name: "Paiban",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 医生排班表格数据
      paibanList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询医生排班列表 */
    getList() {
      this.loading = true;
      listPaiban(this.queryParams).then(response => {
        this.paibanList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  }
};
</script>

<style scoped>
@import '../../public/static/layui/css/layui.css';
@import '../../public/static/css/public.css';

        #one,#two,#three,#four,#five,#six,#seven{
            display: inline;
            font-size: 15px;
            left: 100px;
            position: absolute;

        }
        #eight{
            display: inline;
            font-size: 15px;
            left: 370px;
            position: absolute;
        }
        .span{
            position: absolute;
            padding-left:30px ;
            font-size: 15px;
        }
        .day{
          margin-left:20px;
        }
        li{
            float: left;
        }
        #big{
            width: 1012px;
            height: 370px;
            position: relative;
            top: 240px;
            left: 100px;
            border-radius: 2px;
        }
        #div{

            width: 972px;
            height: 295px;
            border: 1px solid rgb(232,232,232);
            position: relative;
            top: 45px;
            left: 20px;
            border-radius: 3px;
            color:rgb(51,51,51);
        }
        .pai{
            position: absolute;
            top: 10px;
            font-size: 17px;
            left: 20px;
        }
        .container{
          position: absolute;
        }
        .work{
            margin-top: 10px;
            width: 480px;
            height: 160px;
            border: 1px solid rgb(232,232,232);
            float: left;
            border-radius: 3px;
            background: rgb(65,178,166);
        }
        #work2{
            position: absolute;
            left: 632px;
        }
        #work1{
            position: absolute;
            left: 100px;
        }
        .img{
            margin-top: 30px;
            margin-left: 50px;
        }
        .num{
            margin-left:45px;
            margin-top: 15px;
            color: #fff;
        }
        .total{
            margin-left:200px;
            margin-top: 30px;
            color: #fff;
        }
        .desc{
            margin-left:200px;
            margin-top: -90px;
            color: #fff;
        }
    </style>
